<template>
    <div>
        <div id="top">


            <el-row class="demo-autocomplete" style="padding: 30px;top:50%;left:25%;">
                <el-col :span="12">
                    <el-autocomplete
                            class="inline-input"
                            v-model="state2"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            :trigger-on-focus="false"
                            @select="handleSelect"
                            style="width: 400px;"
                    ></el-autocomplete>
                </el-col>
                <el-col style="margin-left: -200px;" :span="30">
                    <el-button type="info" icon="el-icon-search">搜索</el-button>
                </el-col>
            </el-row>


            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     background-color="#2CC3CF" text-color="#fff" active-text-color="#ffd04b" router="true">
                <el-menu-item index="/views/AllGoods">全部商品</el-menu-item>
                <el-menu-item index="/views/ShouYe">首页</el-menu-item>
                <el-menu-item :index="{name:'NewDrug',params:{name:'新药特药进口药'}}">新药特药进口药</el-menu-item>
                <el-menu-item index="/views/Slow">慢性疾病</el-menu-item>
                <el-menu-item index="/views/Common">常见疾病</el-menu-item>

                <div id="login" style="padding: 10px;position: absolute;right: 0px;">
                    <!--					<el-avatar icon="el-icon-user-solid" :size="28"></el-avatar>-->
                    <span>{{username}}</span>
                    <el-button v-on:click="Login" icon="el-icon-user-solid" :size="26"></el-button>
                </div>
            </el-menu>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['username'],
        name: "Top",
        data() {
            return {
                input: '',
                restaurants: [],
                state2: ''
            }
        },
        methods: {
            Login() {
                console.log("点击了")
                this.$router.push("/Personal")
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== 1);
                };
            },
            loadAll() {
                return [
                    {"value": "感康"},
                    {"value": "感冒灵"},
                    {"value": "脑白金"},
                    {"value": "新建特级红枣500g"},
                    {"value": "宁夏枸杞500g"},
                    {"value": "中药泡脚包驱寒（30小袋）"},
                    {"value": "汤臣倍健蛋白质营养粉（750g）"},
                    {"value": "汤臣倍健维生素D维生素K软胶囊（300粒）"},
                    {"value": "汤臣倍健褪黑素片（60片）"},
                    {"value": "江中健胃消食片（64片）"},
                    {"value": "江中健胃消食片（64片)"},
                    {"value": "仁和布洛芬缓释胶囊"},
                    {"value": "家用血压测量仪",},
                    {"value": "电子红外线额温枪家用"},
                    {"value": "志高全自动多功能家用按摩椅"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
    }
</script>

<style>
</style>
